<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <cardnengliu
      v-for="item in cardnengliuarr"
      :diahtml="item.diahtml"
      :options="item.options"
      :key="item.uid"
    />
    <cardmsg
      v-for="item in cardmsgarr"
      :diahtml="item.diahtml"
      :options="item.options"
      :key="item.uid"
    />
  </div>
</template>

<script>
import scene from "./scene.json";
// import geo from '/zz.json'
import axios from "axios";
import cesiummixins from "@/mixins/bigScreen/threeDimensional/cesiumMixins";

import gongre from "../mixins/3d/geojson/3dgongre";
import nengxiao from "../mixins/3d/geojson/3dnengxiao";
import ll from "../mixins/3d/geojson/ll";

import CesiumNavigation from "cesium-navigation-es6";

import cardnengliu from './cardnengliu'
import cardmsg from './cardmsg'

// 1 创建Earth的vue组件
export default {
  components: {
    // efficcom
    cardnengliu,
    cardmsg,
  },
  mixins: [cesiummixins, gongre, nengxiao, ll],
  data() {
    return {
      cardnengliuarr: [],
      cardmsgarr: [],
      showInfo: false,
      winPos: [0, 0, 0, 0],
      message: "",
      _earth: undefined,
      _viewer: undefined,
      _bgImagery: undefined,
      ds: [],
      camheight: 0
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      this.createEarth(this);
    } else if (typeof Cesium !== "undefined") {
      this.createCesium(this);
    }
    this.loadData();
  },

  watch: {
    "$store.state.daping.scencetype": {
      handler: function(n, o) {
        //清空数据
        this.destoryds();
        //加载数据
        switch (n) {
          case "nengxiao":
            this.nengxiao();
            break;
          case "gongre":
            this.gongre();
            break;
          default:
            break;
        }
      }
      // immediate: true,
    }
  },

  methods: {
    loadData() {
      let _this = this;

      //加载场景
      this._earth.xbsjFromJSON(scene);
      // this._earth

      //加载FPS调试
      this._viewer.scene.debugShowFramesPerSecond = true;
      //加载初始化3d元素
      // this.$store.state.daping.scencetype = "gongre";
      //添加zoom监听
      this._viewer.scene.camera.moveEnd.addEventListener(this.zoomed);
      // this._viewer.scene.camera.moveEnd.addEventListener(function(_this) {
      //   //设置zoom高度

      // });

      var options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
      // options.defaultResetView = Cesium.Cartographic.fromDegrees(
      //   110,
      //   30,
      //   2000000
      // );
      // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
      options.enableCompass = true;
      // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。
      options.enableZoomControls = true;
      // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
      options.enableDistanceLegend = false;
      // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
      options.enableCompassOuterRing = true;

      CesiumNavigation(this._viewer, options);

      this.loadmodel();
      this.ll();
    },

    loadmodel() {
      let earth = this._earth;
    },

    zoomed() {
      let _this = this;
      let cheight = Math.ceil(
        this._viewer.camera.positionCartographic.height
      );
      this.$store.state.daping.camheight = cheight
      // console.log();
    },

    destoryds() {
      let _this = this;
      if (this.ds.length != 0) {
        for (let index1 = 0; index1 < this.ds.length; index1++) {
          for (
            let index = 0;
            index < this._viewer.dataSources.length;
            index++
          ) {
            if (this.ds[index1] == this._viewer.dataSources.get(index)._name) {
              this._viewer.dataSources.remove(
                this._viewer.dataSources.get(index)
              );
            }
          }
        }
      }
      this.ds = [];
    },

    createEarth(comp) {
      //创建地球
      let earth = new XE.Earth(comp.$refs.earthContainer);
      this._earth = earth;
      this.$root._earth = earth;
      this._viewer = earth.czm.viewer;
    },
    createCesium(comp) {
      window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
    }
  },

  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};
</script>

<style lang="scss">
// .cesium-performanceDisplay {
//   position: absolute;
//   // top: 0;
//   // right: 0;
// }
.cesium-performanceDisplay-defaultContainer {
  position: absolute;
  margin: 0 auto;
  left: 30%;
  width: 100px;
  top: 50%;
  // right: 10px;
  // text-align: right;
}
</style>